import React, {useEffect, useState} from "react";
import {Icon, NavBar, Pagination, WhiteSpace, WingBlank} from "antd-mobile";
import {useHistory} from "react-router-dom";

import CopyFooter from "../../component/copyFooter";
import {ContentList} from "../../component/cardContent";
import {getBoxes} from "../../requests";


export default function BoxList(props) {
    let rHistory = useHistory();

    let [data, setData] = useState([]);
    let [currentPage, setCurrentPage] = useState(0);
    let [total, setTotal] = useState(0);

    useEffect(function () {
        getBoxes().then((resp) => {
            setData(resp.data.result);
            setCurrentPage(resp.data.current);
            setTotal(resp.data.total);
        });
    }, []);

    return (
        <div>
            <NavBar
                mode="dark"
                icon={<Icon type="left"/>}
                onLeftClick={() => {
                    rHistory.goBack();
                }}
            >所有盒子</NavBar>

            <WhiteSpace/>

            <WingBlank>
                <WhiteSpace/>

                <ContentList data={data}/>
                <WhiteSpace/>

                {data.length > 0 ? (
                    <Pagination total={total} current={currentPage} onChange={current => {
                        getBoxes({page: current}).then((resp) => {
                            setData(resp.data.result);
                            setCurrentPage(resp.data.current);
                            setTotal(resp.data.total);
                        });
                    }}/>
                ) : ""}
            </WingBlank>

            <CopyFooter/>
        </div>
    );
}